// 页面加载事件，等页面渲染完毕再执行 js 代码
window.addEventListener("load", () => {
    // 先获取上传图片的图片元素
    let uploadFile = document.querySelector("#file")
    // 获取 list 和 file 框框
    let list = document.querySelector('.list')
    let file = document.querySelector('.file')

    // 为上传按钮绑定 change 事件，当选中图片然后点击确定按钮时触发
    uploadFile.addEventListener("change", function() {
        console.log(this.files)
        // this.files 是获取到的数据，是一个类数组对象，所以只能用普通 for循环 或者 for of
        for (let item of this.files) {
            /* 动态生成一个 DOM 节点：li */
            let li = document.createElement('li')
            // 给 li 添加内容
            // 上传上去的文件名称保存在每一项的 name 中
            li.innerHTML = `
                <div class="close">×</div>
                <img src="img/${item.name}" />
            `
            // 每生成一个 li 节点就添加到 file 这个元素之前
            // insertBefore() 函数是将一个元素添加到某一个元素之前
            // 第一个参数是要添加的元素，第二个参数是已有的元素
            list.insertBefore(li, file)
        }
    })

    // 给关闭按钮绑定点击事件
    // 注意：动态生成的元素是没办法绑定事件的，这是因为每次添加新的 li 元素都会重绘 dom 树，此时需要借助事件委托实现
    list.addEventListener("click", (e) => {
        // e 是浏览器提供的事件对象
        // e.target 是触发事件的对象，nodeName 是每一个 dom 元素都有的节点且值全部都是大写
        // 这里的意思相当于如果点击的是 x 号就删除
        if (e.target.nodeName === 'DIV') {
            // e.target.parentNode 指的是动态生成的 li 元素
            list.removeChild(e.target.parentNode)
        }
    })
})
